<template>
  <div>
    <Main type="form">
      <el-form
        ref="form"
        label-width="220px"
        label-position="right"
        :model="form"
      >
        <!-- <Title :title="'线上商城'" /> -->

        <el-form-item label="自动收货">
          11小时后自动收货、待支付订单：24小时后未支付订单直接关闭</el-form-item
        >
        <!-- <el-form-item
          label="未支付订单"
          :rules="{
            required: true
          }"
        >
          <el-form-item
            style="float: left;"
            prop="inputa"
            :rules="{
              required: true,
              message: '请输入天数',
              trigger: 'blur'
            }"
          >
            <el-input-number
              v-model="form.inputa"
              size="mini"
              :min="0"
              :precision="0"
              :controls="false"
            ></el-input-number
            >&nbsp;&nbsp;天&nbsp;&nbsp;&nbsp;&nbsp;
          </el-form-item>
          <el-form-item
            style="float: left;"
            prop="inputb"
            :rules="{
              required: true,
              message: '请输入小时',
              trigger: 'blur'
            }"
          >
            <el-input-number
              v-model="form.inputb"
              size="mini"
              :min="0"
              :precision="0"
              :controls="false"
            ></el-input-number
            >&nbsp;&nbsp;小时&nbsp;&nbsp;&nbsp;&nbsp;
          </el-form-item>
          <el-form-item
            style="float: left;"
            prop="inputc"
            :rules="{
              required: true,
              message: '请输入分钟',
              trigger: 'blur'
            }"
          >
            <el-input-number
              v-model="form.inputc"
              size="mini"
              :min="0"
              :precision="0"
              :controls="false"
            ></el-input-number
            >&nbsp;&nbsp;分钟后自动关闭，最长可设置90天，货到付款订单不适用，不填则不自动关闭
          </el-form-item>
        </el-form-item> -->
        <!-- <el-form-item
          label="已发货订单"
          prop="inputd"
          :rules="{
            required: true,
            message: '请输入天数',
            trigger: 'blur'
          }"
        >
          <el-input-number
            v-model="form.inputd"
            size="mini"
            :min="0"
            :precision="0"
            :controls="false"
          ></el-input-number
          >&nbsp;&nbsp;
          天后自动确认收货，填写买家可在确认收货后进行退款/退货申请，最长可设置365天，0代表确认收货后无法维权
        </el-form-item> -->
        <el-form-item
          label="已收货订单"
          prop="inpute"
          :rules="{
            required: true,
            message: '请输入天数',
            trigger: 'blur'
          }"
        >
          <el-input-number
            v-model="form.inpute"
            size="mini"
            :min="0"
            :precision="0"
            :controls="false"
          ></el-input-number
          >&nbsp;&nbsp;
          天后关闭退款/退货功能，填写买家可在确认收货后进行退款/退货申请，最长可设置365天，0代表确认收货后无法维权
        </el-form-item>
        <el-form-item
          label="默认支付方式"
          prop="radio"
          :rules="{
            required: true
          }"
        >
          <el-radio-group v-model="form.radio">
            <el-radio :label="1">优先选中线上支付</el-radio>
            <el-radio :label="2">优先选中线下支付</el-radio>
          </el-radio-group>
          &nbsp;&nbsp; 仅在对应配送方式支持多支付方式时生效
        </el-form-item>
        <el-form-item
          label="商品规格库存不足处理方式"
          prop="radioa"
          :rules="{
            required: true
          }"
        >
          <el-radio-group v-model="form.radioa">
            <el-radio :label="1">允许扣成负库存</el-radio>
            <el-radio :label="2">整个订单自动维权</el-radio>
          </el-radio-group>
          &nbsp;&nbsp; 仅在对应配送方式支持多支付方式时生效
        </el-form-item>
      </el-form>
    </Main>
    <Footer>
      <el-button type="primary" @click="submit">保 存</el-button>
    </Footer>
  </div>
</template>
<script>
import { PROCESSSET } from "../../service";
export default {
  data() {
    return {
      form: {
        inputa: 0,
        inputb: 0,
        inputc: 0,
        inputd: 0,
        inpute: 0,
        radio: 1,
        radioa: 1
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      await PROCESSSET({}).then(({ code, data }) => {
        if (code === 200) {
          this.form.radio = data.default_pay;
          this.form.radioa = data.insufficient_stock;
          this.form.inputd = data.received;
          this.form.inpute = data.shipped;
          let obj = data.unpaid;
          let code = obj.split(",");
          this.form.inputa = code[0];
          this.form.inputb = code[1];
          this.form.inputc = code[2];
        }
      });
    },
    async submit() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          PROCESSSET({
            flag: "save",
            unpaid: [this.form.inputa, this.form.inputb, this.form.inputc].join(
              ","
            ),
            shipped: this.form.inputd,
            received: this.form.inpute,
            default_pay: this.form.radio,
            insufficient_stock: this.form.radioa
          }).then(res => {
            if (
              this.inputa &&
              this.inputb &&
              this.inputc &&
              this.inputd &&
              this.inpute !== "" &&
              this.inputa &&
              this.inputb &&
              this.inputc &&
              this.inputd <= 90 &&
              this.inpute <= 365
            ) {
              if (res.code === 200) {
                this.$message({
                  message: "设置成功",
                  type: "success"
                });
              }
            } else {
              this.$message({
                message: "请输入相关设置内容,查看相关时间限制",
                type: "error"
              });
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.btsample {
  position: relative;
  .sample {
    position: absolute;
    display: none;
    width: 300px;
    height: 400px;
    border: 2px solid gainsboro;
    border-radius: 10px;
    overflow: hidden;
    top: -80px;
    z-index: 9;
  }
  &:hover {
    .sample {
      display: inline-block;
    }
  }
}
</style>
